<!--
 * @Author       : wfl
 * @LastEditors: wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-01 10:07:47
 * @LastEditTime: 2023-04-14 09:04:04
-->
<script lang="ts" setup name="ParamEditModal">
import { paramDict } from './dict'
import { paramApi } from '@/MainApp/apis/param'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formKey: {
    type: Object,
    default: () => {}
  },
  editData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (e: 'update:visible', bool: boolean): void
  (e: 'dataChange'): void
}>()
const { dialog, t } = useConfig()
const { lenName } = useLength()
const { msgError } = useMessage()
// 新增、修改
const placeholder = {
  name: '请输入参数名称',
  type: '请选择参数类型',
  variableKey: '请输入参数键名',
  variableValue: '请输入参数值'
}

const paramState = reactive({
  title: '新增参数',
  loading: false,
  form: { ...props.formKey }
})
const paramRules = {
  name: [{ required: true, message: placeholder.name, trigger: 'blur' }],
  type: [{ required: true, message: placeholder.type, trigger: 'change' }],
  variableKey: [
    { required: true, message: placeholder.variableKey, trigger: 'blur' }
  ],
  variableValue: [
    { required: true, message: placeholder.variableValue, trigger: 'blur' }
  ]
}

const paramRef = ref()
const handleClose = () => {
  emits('update:visible', false)
  paramState.loading = false
  paramRef.value?.resetFields()
  paramState.form = { ...props.formKey }
}
const handConfirm = () => {
  paramRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      paramState.loading = true
      const { msg, success } = props.editData
        ? await paramApi.updateParams(paramState.form)
        : await paramApi.addParams(paramState.form)
      if (success) {
        handleClose()
        emits('dataChange')
      }
      else {
        msgError(msg)
      }

      paramState.loading = false
    }
  })
}

const dVisible = ref(false)
watch(
  () => props.visible,
  (bool: boolean) => {
    dVisible.value = bool
    if (bool && props.editData) {
      paramState.form = { ...props.editData }
      paramState.title = '编辑参数'
    }
  }
)
</script>

<template>
  <el-dialog
    v-model="dVisible"
    :title="paramState.title"
    draggable
    :width="dialog.sl"
    :close-on-click-modal="false"
    @closed="handleClose"
  >
    <el-form
      ref="paramRef"
      :model="paramState.form"
      :rules="paramRules"
      label-width="90px"
      label-position="top"
    >
      <el-form-item label="参数名称" prop="name">
        <el-input
          v-model.trim="paramState.form.name"
          :maxlength="lenName"
          show-word-limit
          :placeholder="placeholder.name"
        />
      </el-form-item>
      <el-form-item label="参数类型" prop="type">
        <el-select
          v-model="paramState.form.type"
          :placeholder="placeholder.type"
        >
          <el-option
            v-for="item in paramDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数键名" prop="variableKey">
        <el-input
          v-model.trim="paramState.form.variableKey"
          :maxlength="lenName"
          show-word-limit
          :placeholder="placeholder.variableKey"
        />
      </el-form-item>
      <el-form-item label="参数值" prop="variableValue">
        <el-input
          v-model.trim="paramState.form.variableValue"
          :placeholder="placeholder.variableValue"
          :maxlength="lenName"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        bg
        text
        @click="handleClose"
      >
        {{ t("action.cancel") }}
      </el-button>
      <el-button
        type="primary"
        bg
        :loading="paramState.loading"
        @click="handConfirm"
      >
        {{ t("action.sure") }}
      </el-button>
    </template>
  </el-dialog>
</template>
